<template>
  <div>
    <BiliComment
      v-if="currentUser&&currentUser.id"
      id="7927df03-bb1e-4a2a-b8cb-04a1039c3d23"
      ref="comment"
    >
      <template slot="sender">
        <MarkdownEditor ref="editor" v-model="comment" :options="options" />
        <div style="height:5rem">
          <div class="cmd-bar">
            <el-button v-loading="loading" type="success" class="cmd-btn" @click="send_comment">发送</el-button>
          </div>
        </div>
      </template>
    </BiliComment>
    <Login v-else />
  </div>
</template>

<script>
export default {
  name: 'Suggest',
  components: {
    BiliComment: () => import('@/components/BiliComment'),
    MarkdownEditor: () => import('@/components/MarkdownEditor/Editor'),
    Login: () => import('@/views/login')
  },
  data: () => ({
    comment: '',
    options: {
      placeholder: '意见反馈,图像上传格式【![名称](网址链接)】'
    },
    loading: false
  }),
  computed: {
    currentUser() {
      return this.$store.state.user.data
    }
  },
  methods: {
    send_comment() {
      this.loading = true
      const comment = this.$refs.editor.get_content()
      const comp = this.$refs.comment
      const cp = comp.comp()[0]
      cp.send_content(comment, () => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.cmd-bar {
  margin-top: 2rem;
  float: right;
  .cmd-btn {
    min-width: 8rem;
  }
}
</style>
